<template>
  <zero-dialog :showDialog.sync="addUpdateFormVisible"
               :fullscreen.sync="fullscreen"
               :btnExist="btnExist"
               :loading="loading"
               :title="title"
               :submit="addOrupdate">

    <div slot="body">
      <el-form :model="addUpdateForm"
               :rules="rules"
               label-width="80px"
               ref="addUpdateFormRef">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item prop="name"
                          label="名称">
              <el-input v-model.trim="addUpdateForm.name"
                        placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="type"
                          label="类型">
              <el-select v-model="addUpdateForm.type"
                         @change="getParentSelect"
                         style="width: 100%">
                <el-option key="CATALOG"
                           value="CATALOG"
                           label="目录"></el-option>
                <el-option key="MENU"
                           value="MENU"
                           label="菜单"></el-option>
                <el-option key="POWER"
                           value="POWER"
                           label="权限"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item v-if="parentIdExist"
                          prop="parentId"
                          label="上级">
              <el-cascader ref="parentRef"
                           v-model="addUpdateForm.parentId"
                           :options="parentOptions"
                           :props="{ value: 'id', label: 'name', checkStrictly: true }"
                           :show-all-levels="false"
                           clearable
                           filterable
                           style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="urlExist"
                          prop="url"
                          label="接口地址">
              <el-input v-model.trim="addUpdateForm.url"
                        placeholder="请输入接口地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item v-if="pathExist"
                          prop="path"
                          label="资源路径">
              <el-input v-model.trim="addUpdateForm.path"
                        placeholder="请输入资源路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="pathExist"
                          prop="cache"
                          label="是否缓存">
              <el-radio-group v-model="addUpdateForm.cache">
                <el-radio-button label="T"
                                 key="T">是</el-radio-button>
                <el-radio-button label="F"
                                 key="F">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="排序">
              <el-input-number v-model="addUpdateForm.sort"
                               controls-position="right"
                               :min="0"
                               style="width: 100%" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item v-if="iconExist"
                          label="图标">
              <e-icon-picker v-model="addUpdateForm.icon"
                             :options="{ FontAwesome: true, ElementUI: true }" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input type="textarea"
                    v-model="addUpdateForm.remarks"
                    placeholder="请输入备注" />
        </el-form-item>
      </el-form>
    </div>
  </zero-dialog>
</template>

<script>
export default {
  name: 'AddUpdateForm',
  props: {
    addUrl: String,
    updateUrl: String,
    getDataList: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      loading: false,
      fullscreen: false, // 弹框全屏
      btnExist: true, // 按钮是否存在
      addUpdateFormVisible: false, // 是否显示弹框
      title: '', // 弹框标题
      addUpdateForm: {},
      initFrom: {
        // 初始弹框
        type: 'CATALOG',
        sort: 0,
        cache: 'DISABLE'
      },
      parentOptions: [],
      iconExist: true,
      urlExist: false,
      pathExist: true,
      parentIdExist: false,
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        url: [{ required: true, message: '请输入接口地址', trigger: 'blur' }],
        path: [{ required: true, message: '请输入资源路径', trigger: 'blur' }],
        cache: [{ required: true, message: '选择是否缓存', trigger: 'blur' }],
        parentId: [{ required: false, message: '请选择上级', trigger: 'blur' }]
      }
    }
  },
  methods: {
    getParentSelect (type) {
      switch (type) {
        case 'CATALOG':
          this.iconExist = true
          this.urlExist = false
          this.pathExist = false
          this.parentIdExist = false
          if (this.$refs.addUpdateFormRef) {
            this.$refs.addUpdateFormRef.clearValidate('parentId')
            this.rules.parentId[0].required = false
          }
          break
        case 'MENU':
          this.iconExist = true
          this.urlExist = false
          this.pathExist = true
          this.parentIdExist = true
          if (this.$refs.addUpdateFormRef) {
            this.$refs.addUpdateFormRef.clearValidate('parentId')
            this.rules.parentId[0].required = false
          }
          break
        case 'POWER':
          this.iconExist = false
          this.urlExist = true
          this.pathExist = false
          this.parentIdExist = true
          this.rules.parentId[0].required = true
          break
      }
      const config = {
        url: 'sysPower/tree',
        method: 'get',
        params: {
          type: type
        }
      }
      delete this.addUpdateForm.parentId
      delete this.addUpdateForm.parentIds
      this.$axios(config).then((res) => {
        this.parentOptions = res.data
      })
    },
    initDialog (row, copy) {
      // 新增或修改
      this.addUpdateFormVisible = true
      this.addUpdateFormReset()
      if (row) {
        // row.type += '' // 转成字符串,不然select控件不支持回显
        // 修改下拉框数据
        this.getParentSelect(row.type)
        this.addUpdateForm = JSON.parse(JSON.stringify(row))
        // 通过父级编号集来回显
        this.addUpdateForm.parentId = this.addUpdateForm.parentIds.split(',')
        if (copy) {
          delete this.addUpdateForm.id
          this.title = '复制权限'
          this.addUpdateForm.sort = this.addUpdateForm.sort + 1
        } else {
          this.title = '修改权限'
        }
      } else {
        this.getParentSelect(this.initFrom.type)
        this.title = '新增权限'
      }
    },
    addOrupdate () {
      // 添加或修改
      this.$refs.addUpdateFormRef.validate((valid) => {
        if (valid) {
          if (this.addUpdateForm.parentId) {
            // 判断是否存在
            if (Array.isArray(this.addUpdateForm.parentId)) {
              if (this.addUpdateForm.parentId.length === 0) {
                // 当为空数组时的处理
                delete this.addUpdateForm.parentId
                delete this.addUpdateForm.parentIds
              } else {
                this.addUpdateForm.parentIds = this.addUpdateForm.parentId.join(',')
                if (this.$refs.parentRef.getCheckedNodes()[0]) {
                  this.addUpdateForm.parentId = this.$refs.parentRef.getCheckedNodes()[0].value
                } else {
                  this.addUpdateForm.parentId = this.addUpdateForm.parentId[0]
                }
              }
            }
          }
          this.loading = true
          this.btnExist = false
          const config = {
            url: this.addUpdateForm.id ? this.updateUrl : this.addUrl,
            method: 'post',
            data: this.addUpdateForm
          }
          this.$axios(config)
            .then((res) => {
              this.loading = false
              this.addUpdateFormVisible = false
              this.btnExist = true
              this.getDataList()
              this.$message.success(res.msg)
            })
            .catch(() => {
              this.loading = false
              this.btnExist = true
            })
        }
      })
    },
    addUpdateFormReset () {
      // 重置表单 需要转成字符串赋值，不然这两个对象的值会一直相等
      this.addUpdateForm = JSON.parse(JSON.stringify(this.initFrom))
      this.$nextTick(() => {
        this.fullscreen = false
        this.$refs.addUpdateFormRef.clearValidate()
      })
    }
  }
}
</script>
